import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import http from "../request";

const { SubMenu } = Menu;

const MenuList = (props) => {
    const [menu, setMenu] = useState([])
    useEffect(() => {
        menuGet()
    }, [])
    
    return (
        <Menu theme="dark" mode="inline" selectedKeys={props.menuKeys} style={{ width: 150, minWidth: 150, height: 600, overflowY: 'auto'}}>
            {
                menu.map(menu => {
                    if(menu?.child && menu.child.length > 0){
                        return (
                            <SubMenu key={'city-' + menu.id} title={menu.name}>
                                {
                                    menu.child.map(menu1 => {
                                        if(menu1?.child && menu1.child.length > 0){
                                            return (
                                                <SubMenu key={'city-' + menu1.id} title={menu1.name}>
                                                    {
                                                        menu1.child.map(menu2 => {
                                                            return <Menu.Item key={'city-' + menu2.id} onClick={() => menuChange(menu2.id, '', '', menu2.id)}>{menu2.name}</Menu.Item>
                                                        })
                                                    }
                                                </SubMenu>
                                            )
                                        } else {
                                            return <Menu.Item key={'city-' + menu1.id} onClick={() => menuChange(menu1.id, '', menu1.id, '')}>{menu1.name}</Menu.Item>
                                        }
                                    })
                                }
                            </SubMenu>
                        )
                    } else {
                        return <Menu.Item key={menu.id} onClick={() => menuChange(menu.id, menu.id, '', '')}>{menu.name}</Menu.Item>
                    }
                })
            }
        </Menu>
    )

    // 城区-列表-树状
    function menuGet(){
        http('city.tree').then(res => {
            if(res.code === 1){
                console.log(res.data,"城区树状-列表");
                setMenu(res.data)
            }
        })
        // http('store.list', {
        //     // ...fieldGet(
        //     //     {name: 'like'},
        //     //     storeSearch,
        //     //     storePager.page,
        //     //     storePager.pageSize
        //     // )
        // }).then(res => {
        //     if(res.code === 1){
        //         console.log(res.data,"所属部门");
        //         // setStoreSource(res.data.rows)
        //         // setStoreTotal(res.data.total)
        //     }
        // })
    }
    function menuChange(id, city, region, area){
        console.log(1);
        props.menuChange(id, city, region, area)
    }
}

export default MenuList